<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style type="text/css">
		canvas{
			background: #272822;
		}
	</style>
	</head>
	<body>
		
	<canvas id="canvas" width="800" height="500"></canvas>
	
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		var cv = canvas.getContext('2d');
		
//		创建图片资源
		var newimg = new Image();
		newimg.src = 'dog.jpg';
		
		newimg.onload = function(){
//			将图片画入画板
			cv.drawImage(newimg,10,10)
			//		获得指定区域内的所有像素点的信息
			var alldata = cv.getImageData(20,20,200,100);
		
//		将图像信息写入画板
			cv.putImageData(alldata,550,350)
		}
		

		
		
		
		
		
	</script>
		
		
	</body>
</html>
